<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 选择器：抓取页面上的元素，给元素添加效果【添加一个样式】  元素选择器 */
			div{
				/* 边框复合属性：生成一个像素实现橙色的边框*/
				border:20px solid#808080;
				width:500px;
				height:500px;
			}
			/* 需求：第二个div边框颜色改成黑色 */
			/* id选择器 html元素前标记 加id=“别名”
					   css中 #别名 抓到元素
					 
			   class选择器 html元素前标记 加class=“别名1 别名2 ”
			              css中 别名 抓到元素
			   */
	#d2{
		border:2px dotted #000;
		backgr ound-color:#000;
        /* 子属性：border-style 边框样式属性     border-style：dotted点线   */
       /* 虚线 border-style：dashed
	      双实线 border-style：double*/
		  /* 子属性：border-color边框颜色属性*/
	}
	.d5{
		/* border边框属性【复合属性】：width style color */
		border:20px solid #f00;
		/* 子属性：border-width 边框的宽度属性 */
		/* 需求：第三个div 40像素 */
		border-width:40px;
		/* 需求：上边框宽度20px 点线 */
		border-top: 20px dotted #f00;
		/* 需求：上边框加颜色 */
		border-top-color: #f00;
		/* 需求：下边框宽度调整为1px */
		border-bottom-width: 1px;
		/* 需求：左边框双实线效果 */
		border-left-style: double;
		/* 需求：右边框 5px 虚线 绿色 */
		border-right: 5px dashed #00ff00;
		/* 需求：第二个div 样式：实线改点线 */
		/* 需求：第一个div 颜色：灰色 */
	}
	/* border-radius边框倒角属性：边框或背景颜色
	画圆：宽高与倒角一致
	border-radius属性值：1个值 代表 上 右 下 左【顺时针】
	                    2个值 代表 上 下|右 左
						3个值 代表 上|右 左|下
						4个值 代表 上|右|下|左
	练习：画圆 四个颜色 旋转  
	第三个div添加悬停效果——伪类选择器：追加效果   语法：任意选择器：hover 悬停效果 功能
	*/
	.d4{
		border:8px solid #f00;
		border-top-color:#ffff00 ;
		border-left-color:#00f;
		border-right-color:#00ff00 ;
		border-radius: 500px;
		/* 过渡属性：悬停效果增加过渡时间 */
		transition:transform 10s;
	}
	/* 第三个div追加悬停效果 */
	.d4:hover{
		/* 效果：旋转 */
		/* 转换属性 */
		transform:rotate(360deg);
	}
		</style>
	</head>
	<body>
		<!-- div 有宽没高的空间  
		  css边框的使用  选择器
		 -->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5"></div>
	</body>
</html>